<template>
	<div class="echarts-box" style="width: 100%; height: 100%">
		<Echart :options="options" id="line1Chart"></Echart>
	</div>
</template>

<script>
import { graphic } from "echarts";

export default {
	data() {
		return {
			options: {},
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init(newData) {
			this.options = {
				tooltip: {
					trigger: "axis",
					backgroundColor: "rgba(0,0,0,.6)",
					borderColor: "rgba(147, 235, 248, .8)",
					textStyle: {
						color: "#FFF",
					},
				},
				grid: {
					left: "2%",
					right: "2%",
					bottom: "5%",
					top: "30px",
					containLabel: true,
				},

				legend: {
					data: ["expected", "actual"],
					show: true,
					// icon: "circle",
					// orient: "horizontal",
					// left: "right",
					// itemWidth: 12,
					// itemHeight: 12,
					formatter: ["{a|{name}}"].join("\n"),
					textStyle: {
						fontSize: 12,
						color: "#6A93B9",
						// rich 自定义富文本样式
						rich: {
							a: {
								verticalAlign: "bottom",
							},
						},
					},
				},
				xAxis: {
					data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
					type: "category",
					boundaryGap: false, //坐标轴两边留白
					axisLine: {
						lineStyle: {
							color: "#ddd",
							fontSize: 12,
						},
					},
					axisLabel: {
						color: "#ddd",
						fontSize: 12,
					},
					axisTick: {
						show: false,
					},
				},
				yAxis: {
					type: "value",
					// min: 0,
					// minInterval: 1,
					nameTextStyle: {
						fontSize: 12,
						color: "#ddd",
						align: "center",
					},
					splitLine: {
						lineStyle: {
							color: "rgba(255, 255, 255, 0.15)",
							type: "dashed", // dotted 虚线
						},
					},
					splitArea: { show: false },
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						fontSize: 12,
						fontFamily: "Bebas",
						color: "#ddd",
					},
				},
				series: [
					{
						type: "line",
						symbol: "circle", //标记的图形
						showSymbol: false,
						smooth: true, // 是否曲线
						name: "expected", // 图例对应类别
						itemStyle: {
							color: "#5090FF",
							lineStyle: {
								color: "#5090FF",
								width: 2,
							},
						},
						animationDuration: 1000,
						animationEasing: "cubicInOut",
						data: [4000, 6000, 7000, 2000, 5000, 7000, 9000], // 纵坐标数据
						areaStyle: {
							// 区域颜色
							// color: new graphic.LinearGradient(0, 0, 0, 1, [
							// 	{
							// 		offset: 0,
							// 		color: "#5090FF",
							// 	},
							// 	{
							// 		offset: 1,
							// 		color: "#1057E5",
							// 	},
							// ]),
							color: {
								type: "linear",
								x: 0, // 右
								y: 0, // 下
								x2: 0, // 左
								y2: 1, // 上
								colorStops: [
									{
										offset: 0.1,
										color: "#5090FF", // 0% 处的颜色
									},
									{
										offset: 1,
										color: "#1057E500", // 100% 处的颜色
									},
								],
							},
						},
					},
					{
						type: "line",
						symbol: "circle", //标记的图形
						itemStyle: {
							color: "#01B3E4",
							lineStyle: {
								color: "#01B3E4",
								width: 2,
							},
						},
						showSymbol: false,
						smooth: true,
						name: "actual",
						animationDuration: 1000,
						animationEasing: "quadraticOut",
						data: [1000, 4000, 5000, 6000, 3000, 8000, 7000],
						areaStyle: {
							// color: new graphic.LinearGradient(0, 0, 0, 1, [
							// 	{
							// 		offset: 0,
							// 		color: "#01B3E4",
							// 	},
							// 	{
							// 		offset: 1,
							// 		color: "#86DCF3",
							// 	},
							// ]),
							color: {
								type: "linear",
								x: 0, // 右
								y: 0, // 下
								x2: 0, // 左
								y2: 1, // 上
								colorStops: [
									{
										offset: 0.1,
										color: "#01B3E4", // 0% 处的颜色
									},
									{
										offset: 1,
										color: "#86DCF300", // 100% 处的颜色
									},
								],
							},
						},
					},
				],
			};
		},
	},
};
</script>

<style lang="scss" scoped></style>
